<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div id="chart-panel" style="height: 600px;width: 100%"></div>
	</body>
	<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
	<script>
		var dom = document.getElementById("chart-panel");
		var myChart = echarts.init(dom);
		var option;
		option = {
			backgroundColor: '#0e202d',
			"title": {
				show: false,
				"text": "第三采油厂",
				// "subtext": "总数: 599",
				"textStyle": {
					"color": "#fff",
					"fontSize": 20
				},
				"subtextStyle": {
					"color": "#999",
					"fontSize": 16
				},
				"x": "center",
				"top": "0%"
			},
			"grid": {
				"top": 200,
				"bottom": 150
			},
			"tooltip": {},
			"xAxis": {
				"data": ["张三1", "张三2", "张三3", "张三4", "张三5", "张三6", "张三7", "张三8", "张三9", "张三10"],
				"axisTick": {
					"show": false
				},
				"axisLine": {
					"show": false
				},
				"axisLabel": {
					interval: 0,
					textStyle: {
						color: '#beceff',
						fontSize: 15,
					},
					margin: 30, //刻度标签与轴线之间的距离。
				}
			},
			"yAxis": {
				"splitLine": {
					"show": false
				},
				"axisTick": {
					"show": false
				},
				"axisLine": {
					"show": false
				},
				"axisLabel": {
					"show": false
				}
			},
			"series": [{
					"name": "",
					"type": "pictorialBar",
					"symbolSize": [20, 10],
					"symbolOffset": [0, -5],
					"z": 12,
					"data": [{
							"name": "张三1",
							"value": "1000",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#00fff5" //圆柱顶部颜色
								}
							}
						},
						{
							"name": "张三2",
							"value": "900",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#00fff5" //圆柱顶部颜色
								}
							}
						},
						{
							"name": "张三3",
							"value": "800",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#00fff5" //圆柱顶部颜色
								}
							}
						},
						{
							"name": "张三4",
							"value": "700",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#b9b7ff" //圆柱顶部颜色
								}
							}
						},
						{
							"name": "张三5",
							"value": "600",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#b9b7ff" //圆柱顶部颜色
								}
							}
						},
						{
							"name": "张三6",
							"value": "500",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#b9b7ff" //圆柱顶部颜色
								}
		 				}
						},
						{
							"name": "张三7",
							"value": "400",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#b9b7ff" //圆柱顶部颜色
								}
							}
						},
						{
							"name": "张三8",
							"value": "300",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#b9b7ff" //圆柱顶部颜色
								}
							}
						},
						{
							"name": "张三9",
							"value": "200",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#b9b7ff" //圆柱顶部颜色
								}
							}
						},
						{
							"name": "张三10",
							"value": "100",
							"symbolPosition": "end",
							"itemStyle": {
								"normal": {
									"color": "#b9b7ff" //圆柱顶部颜色
								}
							}
						}
					]
				},
		 	{
					"name": "",
					"type": "pictorialBar",
					"symbolSize": [20, 10],
					"symbolOffset": [0, 5],
					"z": 12,
					"data": [{
						"name": "张三1",
						"value": "1000",
						"itemStyle": {
							"normal": {
								"color": "#43bafe" //圆柱底部颜色
							}
						}
					}, {
						"name": "张三2",
						"value": "900",
						"itemStyle": {
		 				"normal": {
								"color": "#43bafe" //圆柱底部颜色
							}
						}
					}, {
						"name": "张三3",
						"value": "800",
						"itemStyle": {
							"normal": {
								"color": "#43bafe" //圆柱底部颜色
							}
						}
		 		}, {
						"name": "张三4",
						"value": "700",
						"itemStyle": {
							// "normal": { 
							"color": "#e9a5ff" //圆柱底部颜色
							// }
						}
					}, {
						"name": "张三5",
						"value": "600",
						"itemStyle": {
							"normal": {
								"color": "#e9a5ff" //圆柱底部颜色
							}
						}
					}, {
						"name": "张三6",
						"value": "500",
						"itemStyle": {
							"normal": {
								"color": "#e9a5ff" //圆柱底部颜色
							}
						}
					}, {
						"name": "张三7",
						"value": "400",
						"itemStyle": {
							"normal": {
								"color": "#e9a5ff" //圆柱底部颜色
							}
						}
					}, {
						"name": "张三8",
						"value": "300",
						"itemStyle": {
							"normal": {
								"color": "#e9a5ff" //圆柱底部颜色
							}
						}
					}, {
						"name": "张三9",
						"value": "200",
						"itemStyle": {
							"normal": {
								"color": "#e9a5ff" //圆柱底部颜色
							}
						}
					}, {
						"name": "张三10",
						"value": "100",
						"itemStyle": {
							"normal": {
								"color": "#e9a5ff" //圆柱底部颜色
							}
						}
					}]
				},
		 	{
					"name": "",
					"type": "pictorialBar",
					"symbolSize": [30, 15],
					"symbolOffset": [0, 10],
					"z": 11,
					"data": [{
						"name": "张三1",
						"value": "1000",
						"itemStyle": {
							// "normal": {
							"color": "transparent",
							"borderColor": "#43bafe", //底部内圆圈颜色
							"borderWidth": '5'
							// }
						}
					}, {
		 			"name": "张三2",
						"value": "900",
						"itemStyle": {
							// "normal": {
							"color": "transparent",
							"borderColor": "#43bafe", //底部内圆圈颜色
							"borderWidth": 5
							// }
						}
					}, {
						"name": "张三3",
						"value": "800",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#43bafe", //底部内圆圈颜色
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三4",
						"value": "700",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部内圆圈颜色
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三5",
						"value": "600",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部内圆圈颜色
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三6",
						"value": "500",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部内圆圈颜色
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三7",
						"value": "400",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部内圆圈颜色
								"borderWidth": 5
							}
						}
		 		}, {
						"name": "张三8",
						"value": "300",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部内圆圈颜色
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三9",
						"value": "200",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部内圆圈颜色
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三10",
						"value": "100",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部内圆圈颜色
								"borderWidth": 5
							}
						}
					}]
				},
				{
					"name": "",
					"type": "pictorialBar",
					"symbolSize": [60, 30],
					"symbolOffset": [0, 18],
					"z": 10,
					"data": [{
						"name": "张三1",
						"value": "1000",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#43bafe", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三2",
						"value": "900",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#43bafe", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": "5"
							}
						}
					}, {
						"name": "张三3",
						"value": "800",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#43bafe", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三4",
						"value": "700",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三5",
						"value": "600",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部外圆圈颜色
		 					"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三6",
						"value": "500",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三7",
						"value": "400",
						"itemStyle": {
							"normal": {
		 					"color": "transparent",
								"borderColor": "#e9a5ff", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三8",
						"value": "300",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三9",
						"value": "200",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}, {
						"name": "张三10",
						"value": "100",
						"itemStyle": {
							"normal": {
								"color": "transparent",
								"borderColor": "#e9a5ff", //底部外圆圈颜色
								"borderType": "dashed",
								"borderWidth": 5
							}
						}
					}]
				},
				{

					"type": "bar",
					"silent": true,
					"barWidth": 20,
					"barGap": "-100%",
					"itemStyle": {
						"normal": {
							"color": {
								"x": 0,
								"y": 0,
								"x2": 0,
								"y2": 1,
								"type": "linear",
								"global": false,
								"colorStops": [{
									"offset": 0,
									"color": "rgba(0,255,245,0.5)"
								}, {
									"offset": 1,
									"color": "#43bafe" //底部渐变颜色
								}]
							}
						}
					},
					"data": [{
							"name": "张三1",
							"value": "1000",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#00fff5", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
						},
						{
							"name": "张三2",
							"value": "900",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#00fff5", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
						},
						{
							"name": "张三3",
							"value": "800",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#00fff5", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							}
						}, {
							"name": "张三4",
							"value": "700",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#b9b7ff", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
							"itemStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
											"offset": 0,
											"color": "rgba(185,183,255,0.5)"
										}, {
											"offset": 1,
											"color": "#e9a5ff" //底部渐变颜色
										}]
									}
								}
							}
						}, {
							"name": "张三5",
							"value": "600",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#b9b7ff", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
							"itemStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
											"offset": 0,
											"color": "rgba(185,183,255,0.5)"
										}, {
											"offset": 1,
											"color": "#e9a5ff" //底部渐变颜色
										}]
									}
								}
							}
						}, {
							"name": "张三6",
							"value": "500",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#b9b7ff", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
							"itemStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
											"offset": 0,
											"color": "rgba(185,183,255,0.5)"
										}, {
											"offset": 1,
											"color": "#e9a5ff" //底部渐变颜色
										}]
									}
								}
							}
						}, {
							"name": "张三7",
							"value": "400",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#b9b7ff", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
							"itemStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
											"offset": 0,
											"color": "rgba(185,183,255,0.5)"
										}, {
											"offset": 1,
											"color": "#e9a5ff" //底部渐变颜色
										}]
									}
								}
							}
						}, {
							"name": "张三8",
							"value": "300",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#b9b7ff", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
							"itemStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
											"offset": 0,
											"color": "rgba(185,183,255,0.5)"
										}, {
											"offset": 1,
											"color": "#e9a5ff" //底部渐变颜色
										}]
									}
								}
							}
						}, {
							"name": "张三9",
							"value": "200",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#b9b7ff", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
							"itemStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
											"offset": 0,
											"color": "rgba(185,183,255,0.5)"
										}, {
											"offset": 1,
											"color": "#e9a5ff" //底部渐变颜色
										}]
									}
								}
							}
						}, {
							"name": "张三10",
							"value": "100",
							"label": {
								"normal": {
									"show": true,
									"position": "top",
									"distance": 20,
									"textStyle": {
										"color": "#b9b7ff", //柱子对应数值颜色
										"fontSize": 20
									}
								}
							},
							"itemStyle": {
								"normal": {
									"color": {
										"x": 0,
										"y": 0,
										"x2": 0,
										"y2": 1,
										"type": "linear",
										"global": false,
										"colorStops": [{
											"offset": 0,
											"color": "rgba(185,183,255,0.5)"
										}, {
											"offset": 1,
											"color": "#e9a5ff" //底部渐变颜色
										}]
									}
								}
							}
						},
					]
				}
			]
		}
		if (option && typeof option === 'object') {
			myChart.setOption(option);
		}
	</script>
</html>
